<template>
        <div class="container">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            <!-- page-size  首次按100条分页 -->
            <!-- layout配置我们的分页器 -->
        </el-pagination>
    </div>
</template>

<script>
export default {
    props:['page','pageSize','total'],
    data(){
        return{
        //    page:1  //当前页码
    }
 },
    methods: {
    //  每页有多少条下拉框  切换时触发
        handleSizeChange(val) {
        this.$emit('changepagesize',val)
        // console.log(`每页 ${val} 条`);
    },
    //当前页码的切换
    handleCurrentChange(val) {
        // 重新查询一下
        this.$emit('changeVal',val)
        // console.log(`当前页: ${val}`);

        }
    }
}
</script>

<style lang="less" scoped>
    .container{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }
</style>